<template>
 <el-dialog
  class="commonDialog"
  :title="parentTitle === 1 ? '添加会员信息' : '编辑会员信息'"
  :visible.sync="visible"
  width="400px"
  :before-close="cancelModule">
        <el-form ref="addMeal" :rules="rules" class="commonForm mt45" :model="addMeal" label-width="40%">
            <el-form-item label="姓名:" prop="userName" required>
                <el-input class="commonInput" v-model="addMeal.userName" ></el-input>
            </el-form-item>
            <el-form-item label="会员类型:" prop="categoryId" required>
                 <el-select class="commonSelect" v-model="addMeal.categoryId" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级:" prop="className" required>
                <el-input class="commonInput" v-model="addMeal.className" ></el-input>
            </el-form-item>
            <el-form-item label="身份证号:" prop="idNumber" required>
                <el-input class="commonInput" placeholder="请输入身份证号" v-model="addMeal.idNumber" ></el-input>
            </el-form-item>
            <el-form-item label="卡号:" prop="cardNumber" required>
                <el-input class="commonInput" v-model="addMeal.cardNumber" ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="mobile" required>
                <el-input class="commonInput" v-model="addMeal.mobile" ></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="gender" required>
                <template>
                    <el-radio v-model="addMeal.gender" :label="1">男</el-radio>
                    <el-radio v-model="addMeal.gender" :label="0">女</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="人脸照片:" prop="facePhotos" >
                <el-upload
                    class="avatar-uploader"
                    action="http://fuguapi.free.idcfengye.com/api/Facility/FacilityUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item class="btnsLine mt60">
                <el-button class="commonButton" @click="cancelModule(false)">取消</el-button>
                <el-button class="commonButton" @click.prevent="submitForm('addMeal')" v-if="parentTitle === 1">确定</el-button>
                <el-button class="commonButton" @click.prevent="submitEditForm('addMeal')" v-if="parentTitle === 2">确定</el-button>
            </el-form-item>
        </el-form>
</el-dialog>
</template>
<script>
import moment from 'moment';
import axios from 'axios';
import { formatDate } from '@/filters/index';
export default {
    props: ['parentDialogVisible', 'getParentTableData', 'parentTitle', 'parentCurrentMeal'],
    data() {
        return {
            urlPrev: 'http://39.106.7.166:8089/',
            visible: false,
            addMeal: {
                id:1,
                restaurantId: '1',
                userName: '',
                categoryId: '',
                className: '',
                idNumber: '',
                cardNumber: '',
                mobile:'',
                gender:'',
                facePhotos:'fuguwulian'
            },
            options:[
                {
                value: 0,
                label: '社会人士'
                }, {
                value: 1,
                label: '学生'
                }
            ],
            imageUrl: '',
            imageAddress: '',
            rules: {
                userName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                category: [
                    { required: true, message: '选择会员类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                idNumber: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                cardNumber: [
                    { required: true, message: '请输入卡号', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' }
                ],
            },
        }
    },
    mounted(){
         this.visible = true;
         if(this.parentTitle === 2) {
             this.initFormData();
         }
    },
    methods: {
        //图片上传
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.$emit('imageAddress', this.imageUrl);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 编辑初始化表单
        initFormData(){
            this.addMeal = this.parentCurrentMeal;
        },
         //关闭弹框
        cancelModule(val) {
            this.$emit('cancelModule', val);
        },
        // 新增
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.mealSave();
            } else {
                console.log('提交错误!');
                return false;
            }
            });
        },
        // 编辑
         submitEditForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.mealEdit();
            } else {
                console.log('提交错误!');
                return false;
            }
            });
        },
        // // 格式化时间
        // formatDateTime(cellValue) {
        //     return moment(cellValue).format('0001/01/01 HH:mm:ss');
        // },
        // resetForm(formName) {
        //     this.$refs[formName].resetFields();
        // },
        // handleClick(tab, event) {
        //     console.log(tab, event);
        // },
        // 添加
        mealSave() {
            const url = this.urlPrev + `api/member/addmember`;
            axios({ method: 'post', url: url, data: this.addMeal })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        this.$emit('getParentTableData');
                         this.$message({
                            message: '餐别保存成功',
                            type: 'success',
                        });
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
                return false;
        },
         // 编辑餐别
        mealEdit() {
            const url = this.urlPrev + `api/member/editmember`;
            axios({ method: 'post', url: url, data: this.addMeal })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        this.$emit('getParentTableData');
                         this.$message({
                            message: '编辑餐别成功',
                            type: 'success',
                        });
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
                return false;
        },
        

    }
}
</script>
<style lang="scss" scoped>

</style>